<template>
  <el-dialog
    title="要件办理"
    :visible.sync="dialogFormVisible"
    @close="close"
    width="80%"
    :destroy-on-close="true"
  >
    <div v-loading="loading" class="readonly">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row type="flex" justify="start">
          <el-col :span="7">
            <el-form-item
              prop="yj_lb"
              label="要件类别"
            >
              <el-select
                size="medium"
                v-model="form.yj_lb"
                placeholder="请选择活动区域"
                :disabled="lookOrEdit == 3"
                @change="$refs.form.clearValidate('yj_lb')"
              >
                <el-option
                  :label="item.keys"
                  :value="item.values"
                  v-for="item in Lb"
                  :key="item.id"
                ></el-option>
                <!-- <el-option label="土地" value="土地"></el-option>
                <el-option label="草原" value="草原"></el-option>
                <el-option label="水保" value="水保"></el-option>
                <el-option label="环保" value="环保"></el-option>
                <el-option label="文保" value="文保"></el-option>
                <el-option label="铁路" value="铁路"></el-option>
                <el-option label="覆压矿产" value="覆压矿产"></el-option>
                <el-option label="资金计划" value="资金计划"></el-option>-->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="yj_zjrq" label="组卷日期">
              <el-date-picker
                value-format="yyyy-MM-dd"
                size="medium"
                v-model="form.yj_zjrq"
                type="date"
                placeholder="选择日期"
                :disabled="lookOrEdit == 3"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="yj_pfrq" label="批复日期">
              <el-date-picker
                value-format="yyyy-MM-dd"
                size="medium"
                v-model="form.yj_pfrq"
                type="date"
                placeholder="选择日期"
                :disabled="lookOrEdit == 3"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="yj_pfdw" label="批复单位">
              <el-input
                size="medium"
                v-model.trim="form.yj_pfdw"
                :disabled="lookOrEdit == 3"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="d-flex">
          <el-col :span="24">
            <el-form-item prop="bz" label="备注">
              <el-input
                size="medium"
                v-model.trim="form.bz"
                placeholder="未完成原因/特殊情况说明"
                :disabled="lookOrEdit == 3"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-row class="d-end">
        <span
          class="d-end"
          style="width: 120px; padding: 0 10px; flex-shrink: 0"
          >上传附件</span
        >
        <el-col :span="24">
          <!-- <div class="click d-center">上传附件</div> -->
          <uploader
            :fileslists="fileslist"
            :options="options"
            :file-status-text="statusText"
            :fileurl="this.$updata"
            class="uploader-example"
            ref="uploader"
            @file-success="fileSuccess"
            @file-remove="remove"
            :app="lookOrEdit != 3"
          ></uploader>
          <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>-->
        </el-col>
      </el-row>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="medium" @click="dialogFormVisible = false"
        >取 消</el-button
      >
      <el-button
        size="medium"
        type="primary"
        @click="save"
        v-if="$route.query.is_sealed == 1 && lookOrEdit != 3"
        :loading="loading"
        >保 存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import mixinsFile from "@/mixins/uploadFile.js";

export default {
  mixins: [mixinsFile],

  props: ["dialogFormVisible1", "item", "Lb", "lookOrEdit"],
  data() {
    return {
      form: {},
      rules: {
        // yj_lb: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // yj_pfrq: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // yj_zjrq: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // yj_pfdw: [{ required: true, message: "该值不能为空", trigger: "blur" }]
      },
      formLabelWidth: "140px",
      dialogFormVisible: false,
      activeName: "1",
      loading: false,
      fileslist: [],
      options: {
        target: this.$updata + "/api/index/uploads", // '//jsonplaceholder.typicode.com/posts/',
        testChunks: false,
      },
      statusText: {
        success: "成功了",
        error: "出错了",
        uploading: "上传中",
        paused: "暂停中",
        waiting: "等待中",
      }, //上传
      saveHide: false,
    };
  },
  methods: {
    close() {
      this.$refs.form.resetFields();
      this.$emit("close", this.saveHide);
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          //上传参数组合
          let fileUrl = this.fileslist.map((v) => {
            return v.path;
          });
          this.form.files = fileUrl.join(",");
          //上传参数组合
          delete this.form.filesarr;

          this.form.xm_id = this.$route.query.xm_id;
          this.$post("/api/QqYjbl/actions", this.form).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.saveHide = true;
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
    //上传组件移除返回
    remove(index) {
      this.fileslist.splice(index, 1);
    },
    //上传成功返回
    fileSuccess(rootFile, file, message, chunk) {
      if (JSON.parse(message).state == "success") {
        this.fileslist.push({
          path: JSON.parse(message).code,
          name: chunk.file.name,
        });
      } else {
        this.$message({
          message: chunk.file.name + JSON.parse(message).code,
          type: "error",
        });
      }
    },
  },
  watch: {
    dialogFormVisible1(news) {
      this.dialogFormVisible = news;
      if (news) {
        this.saveHide = false;
        this.form = { ...this.item };
        if (this.form.yj_pfrq == "0000-00-00") this.form.yj_pfrq = "";
        if (this.form.yj_zjrq == "0000-00-00") this.form.yj_zjrq = "";
        this.fileslist = this.item.files ? this.item.filesarr : [];
      }
    },
    // item(news) {}
  },
};
</script>

<style scoped lang="less">
</style>